<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>千锋美团大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
</head>

<body>
    <!-- <div class="test">测试</div> -->

    <!-- 头部 -->
    <header>
        <h1>千锋🤝美团大数据可视化平台</h1>
        <span>2022年3月14日15时12分19秒</span>
    </header>
    <!-- 头部 -->

    <!-- 图表 -->
    <section class="charts">
        <div class="column">
            <div class="box" style="height: 4rem;"></div>
            <div class="box l2" style="height: 2.66rem;">
            <div class="bt">标题样式</div>
            <div class="wenzi">
                <span>单号</span>
                <span>金额</span>
                <span>品名</span>
                <span>时间</span>
            </div>
            <div class="neirong">
            <div>
                <span>124688532324654</span>
                <span>手机</span>
                <span>18小时</span>
            </div>
            <div>
                <span>124688523124654</span>
                <span>手机</span>
                <span>18小时</span>
            </div>
            <div>
                <span>124688232254654</span>
                <span>手机</span>
                <span>18小时</span>
            </div>
            <div>
                <span>124682322854654</span>
                <span>手机</span>
                <span>18小时</span>
            </div>
            
            
            </div>
            </div>
            <div class="box l3" style="height: 2.66rem;"></div>
        </div>
        <div class="column">
            <div class="box box-m1" style="height: 2.3rem;">
                <div class="ml">
                    <div class="bt">
                        总体情况
                        <span>(单位：元)</span>
                    </div>
                  <div class="ziti">19382721</div>
                </div>
                <div class="mr">
                    <div class="y m2"></div>
                    <div class="y m3"></div>
                    <div class="y m4"></div>
                </div>
            </div>
            <div class="box box-m2" style="height: 3.5rem;"></div>
            <div class="box box-m3" style="height: 3.4rem;"></div>
        </div>
        <div class="column">
            <div class="box r1" style="height: 3rem;">
            <div class="rbt">标题样式</div>
            <div class="rwenzi">
                <span>排名</span>
                <span>公司</span>
                <span>数量</span>
                <span>增长率</span>
            </div>
            <div class="rneirong">
                <div>
                    <span class="tubiao" style="background:red ;">1</span>
                    <span>腾讯科技</span>
                    <span>114万</span>
                    <span>100%</span>
                </div>
                <div>
                    <span class="tubiao" style="background-color:#f78c44 ;">2</span>
                    <span>百度公司</span>
                    <span>923833万</span>
                    <span>21%</span>
                </div>
                <div>
                    <span class="tubiao" style="background-color:#49bcf7 ;">3</span>
                    <span>新浪</span>
                    <span>1240253万</span>
                    <span>12%</span>
                </div>
                <div>
                    <span class="tubiao">4</span>
                    <span>网易</span>
                    <span>1.2亿</span>
                    <span>39%</span>
                </div>
                <div>
                    <span class="tubiao">5</span>
                    <span>雅虎</span>
                    <span>13423万</span>
                    <span>9%</span>
                </div>
            </div>
            <div class="box r2" style="height: 3rem;">
            <div class="rbt">标题样式</div>
            <div class="rwenzi">
                <span>排名</span>
                <span>公司</span>
                <span>数量</span>
                <span>增长率</span>
            </div>
            <div class="rneirong">
                <div>
                    <span class="tubiao" style="background:red ;">1</span>
                    <span>腾讯科技</span>
                    <span>114万</span>
                    <span>100%</span>
                </div>
                <div>
                    <span class="tubiao" style="background-color:#f78c44 ;">2</span>
                    <span>百度公司</span>
                    <span>923833万</span>
                    <span>21%</span>
                </div>
                <div>
                    <span class="tubiao" style="background-color:#49bcf7 ;">3</span>
                    <span>新浪</span>
                    <span>1240253万</span>
                    <span>12%</span>
                </div>
                <div>
                    <span class="tubiao">4</span>
                    <span>网易</span>
                    <span>1.2亿</span>
                    <span>39%</span>
                </div>
                <div>
                    <span class="tubiao">5</span>
                    <span>雅虎</span>
                    <span>13423万</span>
                    <span>9%</span>
                </div>
            </div>
            </div>
            <div class="box r3" style="height: 3.2rem;"></div>
        </div>
    </section>
    <!-- 图表 -->

    <script src="./assets/js/flexible.js"></script>
    <script src="http://unpkg.zhimg.com/jquery"></script>
    <script src="https://unpkg.com/webopenfather-date@1.0.1/dist/wofDate.js"></script>
    <script src="https://unpkg.com/echarts"></script>
    <script src="./assets/js/left1.js"></script>
    <script src="./assets/js/m2.js"></script>
    <script src="./assets/js/m1-1.js"></script>
    <script src="./assets/js/m1-2.js"></script>
    <script src="./assets/js/m1-3.js"></script>
    <script src="./assets/js/m3.js"></script>
    <script src="./assets/js/left3.js"></script>
    <script src="./assets/js/r3.js"></script>
    <script>
        setInterval(() => {
            $('header span').html(wofDate.format('Y年m月d日H时i分s秒'))
        }, 1000)
    </script>
</body>

</html>